import { IconFont, IconType } from '@/components/AntdIcon';
import { Space } from 'antd';
import { useModel } from 'umi';
import { Button } from './Button';
import { useHotkeys } from 'react-hotkeys-hook';

export function UndoRedo() {
  const { backLength, back, forwardLength, forward } = useModel('bom');

  const disabledUndo = backLength === 0;
  function onUndo() {
    if (disabledUndo) return;
    back();
  }
  const disabledRedo = forwardLength === 0;
  function onRedo() {
    if (disabledRedo) return;
    forward();
  }

  useHotkeys('ctrl+z', () => onUndo(), [onUndo]);
  useHotkeys('ctrl+shift+z', () => onRedo(), [onRedo]);

  return (
    <Space>
      <Button
        icon={<IconFont type={IconType.Undo} />}
        onClick={onUndo}
        disabled={disabledUndo}
      >
        撤销
      </Button>
      <Button
        icon={<IconFont type={IconType.Redo} />}
        onClick={onRedo}
        disabled={disabledRedo}
      >
        恢复
      </Button>
    </Space>
  );
}
